<template>
    <p>Vuex</p>
    <p>count: {{ count }}</p>
    <p>tenTimes: {{ tenTimes }}</p>
    <button @click="updateVuexCount">修改count</button>
    <button @click="asyncIncrement">修改count-action</button>
    <p>moduleA: countA {{ store.state.a.countA }}</p>
    <p>moduleB: countB {{ store.state.b.countB }}</p>
    <p>moduleA: doubleCountA {{ store.getters.doubleCountA }}</p>
    <p>moduleB: doubleCountB {{ store.getters['b/doubleCountB'] }}</p>

    <button @click="moduleAincrementA">模块A-mutation-触发</button>
    <button @click="moduleBincrementB">模块B-mutation-触发</button>

    <button @click="moduleAasyncIncrementA">模块A-action-触发</button>
    <button @click="moduleAasyncIncrementB">模块B-action-触发</button>

    <button @click="moduleBemitGlobalMut">模块B出发全局-mut</button>
    <button @click="moduleBemitGlobalAct">模块B出发全局-act</button>




</template>

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';
//创建一个新的 store 实例


//获得一个Vue的实例化对象
const store = useStore()

const count = computed(() => store.state.count)
const tenTimes = computed(() => store.getters.tenTimes)

//触发mutation
const updateVuexCount = () => {
    store.commit("increment",{ count: 20 })
}

const moduleAincrementA = () => {
    store.commit('incrementA')
}

const moduleBincrementB = () => {
    store.commit('b/incrementB')
}

//action
const moduleAasyncIncrementA =() => {
    store.dispatch('asyncIncrementA')
}
const moduleAasyncIncrementB = () =>{
    store.dispatch('b/asyncIncrementB')
}

const moduleBemitGlobalMut = () => {
    store.dispatch('b/emitGlobalMut')
}

const moduleBemitGlobalAct = () => {
    store.dispatch('b/emitGlobalAct')
}


//使用 action
const asyncIncrement = () => store.dispatch('asyncIncrement',{count: 30})

</script>

<style scoped>

</style>
